<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { getSalarysReportsApi } from '@/common/apis/wages'
import { useRoute, useRouter } from 'vue-router';
import { postSalarysHistorysDataArchive, putSalarysReportsReportsApi, getSalarysHistorysExportApi } from '@/common/apis/wages'
import { message } from 'ant-design-vue';
import { saveAs } from 'file-saver';

// 用户传递过来的id
const route = useRoute()
const router = useRouter()

// 获取路由参数id
const employeeId = route.params.yearMonth
const size = ref(10)
// 储存用户薪资列表数据
const salarysReportsData = ref([])

const columns = [
    {
        title: '序号',
        dataIndex: 'SerialNumber',
        customRender: ({ index }: { text: string; index: number }) => index + 1
    },
    {
        title: '姓名',
        dataIndex: 'username',
    },
    {
        title: '手机号',
        dataIndex: 'mobile',
    },
    {
        title: '工号',
        dataIndex: 'workNumber',
    },
    {
        title: '部门名称',
        dataIndex: 'departmentName',
    },
    {
        title: '在职状态',
        dataIndex: 'inServiceStatus',
    },
    {
        title: '公积金个人',
        dataIndex: 'providentFundIndividual',
    },
    {
        title: '社保个人',
        dataIndex: 'socialSecurityIndividual',
    },
    {
        title: '社保企业',
        dataIndex: 'socialSecurityEnterprise',
    },
    {
        title: '公积金企业',
        dataIndex: 'providentFundEnterprises',
    },
    {
        title: '公积金社保企业',
        dataIndex: 'socialSecurityProvidentFundEnterprises',
    },
    {
        title: '基本工资',
        dataIndex: 'operation',
    },
    {
        title: '岗位公司',
        dataIndex: 'operation',
    },
    {
        title: '福利津贴',
        dataIndex: 'operation',
    },
    {
        title: '考勤扣款',
        dataIndex: 'operation',
    },
    {
        title: '税前工资合计',
        dataIndex: 'operation',
    },
    {
        title: '应纳税工资',
        dataIndex: 'operation',
    },
    {
        title: '应扣款',
        dataIndex: 'operation',
    },
    {
        title: '实发工资',
        dataIndex: 'operation',
    },
];

// 获取用户薪资列表数据
const getSalarysReportsData = async () => {
    const res = await getSalarysReportsApi({ yearMonth: employeeId, opType: 1 })

    salarysReportsData.value = res.data.data
}

// 工资数据归档
const salaryfiling = async () => {
    console.log(employeeId, 'employeeId')
    await postSalarysHistorysDataArchive({ yearMonth: employeeId }).then((res) => {
        message.success(res.data.message)
    }).catch(err => {
        message.warning(err.response.data.message)
    })
}

// 新建报表
const createaReport = async () => {
    const res = await putSalarysReportsReportsApi({ yearMonth: employeeId })
    console.log(res, 'res')
}

// 批量导出报表
const batchExport = async () => {
    const result = await getSalarysHistorysExportApi({ yearMonth: employeeId })
    // 创建blob 对象
    const blob = new Blob([result.data], { type: result.data.type })
    // 使用 file-saver 报错文件
    saveAs(blob, '员工列表.xlsx')
}

onMounted(() => {
    getSalarysReportsData()
})
</script>


<template>
    <div class="report">
        <div class="report-content">
            <h1>工资报表</h1>
            <div class="report-content-button">
                <a-button type="primary" @click="batchExport">导出</a-button>
            </div>
            <!-- 报表数据 -->
            <div style="margin-top: 10px;">
                <a-table :columns="columns" :data-source="salarysReportsData" bordered :scroll="{ x: 2500 }"
                    :pagination="false">
                    <template #bodyCell="{ column, record, index }">
                        <template v-if="column.dataIndex === 'SerialNumber'">
                            <span>{{ index + 1 }}</span>
                        </template>
                        <template v-else-if="column.dataIndex === 'inServiceStatus'">
                            <span>{{ record.inServiceStatus == 1 ? '在职' : '离职' }}</span>
                        </template>
                    </template>
                </a-table>
            </div>
        </div>

        <!-- 按钮 -->
        <div class="report-button">
            <a-space :size="size">
                <a-button type="primary" @click="salaryfiling">归档{{ typeof employeeId === 'string' ?
                    employeeId.substr(4) : ''
                }}报表</a-button>
                <a-button type="primary" @click="createaReport">新建报表</a-button>
                <a-button @click="router.push('/wages')">取消</a-button>
            </a-space>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.report {
    &-content {
        padding: 10px;
        background-color: white;

        &-button {
            text-align: right;
        }
    }

    &-button {
        margin-top: 10px;
        text-align: center;
    }
}

.editable-row-operations a {
    margin-right: 8px;
}
</style>